<template>
  <el-dialog
    :before-close="close"
    title="导出"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <div style="margin-bottom: 50px">是否确认导出所选文件</div>
    <el-row :gutter="30" type="flex">
      <el-col>
        <el-input
          v-model="verifyCode"
          placeholder="验证码"
          name="verifyCode"
          type="text"
        />
      </el-col>
      <el-col style="margin-top: 3px">
        <img :src="verifyCodeUrl" alt="" @click="getVerifyCodeUrl">
        <el-button type="text" @click="getVerifyCodeUrl">换一张</el-button>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="isDownFile">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'ExportToExcel',
  props: {
    childDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      verifyCode: '',
      currentTime: new Date().getTime(),
      dialogVisible: this.childDialogVisible
    }
  },
  computed: {
    verifyCodeUrl() {
      return this.cfg.apiDomain + '/login/verifyCode?' + this.currentTime
    }
  },
  watch: {
    childDialogVisible(val) {
      this.dialogVisible = val
      if (val) {
        this.verifyCode = '';
        this.getVerifyCodeUrl();
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:childDialogVisible', false);
    },
    getVerifyCodeUrl() {
      const currentTime = new Date().getTime();
      this.currentTime = currentTime;
    },
    isDownFile() {
      const _this = this;
      this.close();
      request({
        url: '/system/sysDownTask/verifyCode',
        method: 'get',
        params: {
          verifyCode: _this.verifyCode
        }
      }).then(res => {
        if (res.code === 200) {
          this.$emit('handleExportToExcel');
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
